<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <!-- vue:view 尤玉溪 -->
</head>
<body>
    <!-- vue ：渐进式框架 mvvm框架 -->
    <!-- 如何使用 1.直接引入 2.vue脚手架创建 -->
    <!-- 直接引入 -->
    <div id="app">
        <!-- 插值表达式 ${变量} #{变量} {{变量}}(大胡子语法) -->
        <!-- 插值表达式 ：里面是类js环境 -->
        {{'mydata'}}
        {{1+1}}
        {{'hello'+str }}
        <div>
            <div>
                {{message}}
            </div>
           
        </div>
       
        <hr>
        {{str}}
        <hr>
        <!-- 插值表达式可以接受 三元运算符 -->
        姓名是：{{judge?'张三':'李四'}}
        <hr>
        {{arr.length}}
        <hr>
        {{obj}}
    </div>
    <!-- {{message}} -->
    <script>
        // Vue类 
        // console.log(Vue);
        // vue 数据驱动，数据优先
        // 数据响应式：数据更改了视图会自动更改，视图更改了 数据也会随之变动
        // 1.数据和app关联 2.插值表达式是简单的js环境 3.data支持任意类型
        // 4.数据会自动响应视图 
        // 视图不会响应数据的情况  1.数组的直接改变 2.对象的新增不会响应 3.更改数组的长度
       let vm =  new Vue({
            el:"#app",   // element :挂载点 
            data:{
                message:"hello world",
                str:"你好",
                judge:false,
                arr:[1,2,3],
                obj:{
                    name:"张三",
                    age:20
                }
            }
        })
        setTimeout(() => {
            console.log("执行了");
            vm.arr.length = 4;
            // vm.arr.push(4);
            // // vm.arr[1] = "修改了";
            // // vm.obj.name = "李四";
            // vm.obj.height = "178cm";
            // vm.judge = true;
            // vm.message = "11111";
        }, 3000);



    </script>
</body>
</html>